<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="/static/css/mobile/common.css">
    <link rel="stylesheet" href="/static/css/mobile/index.css">
    <title>智慧答题系统 - 在线知识竞赛平台</title>
</head>
<body>
    <div class="page-wrapper">
        <!-- 顶部横幅 -->
        <div class="top-banner">
            <div class="banner-content">
                <div class="logo-section">
                    <img src="/static/img/logo.png" alt="Logo" class="banner-logo">
                    <div>
                        <h1 class="banner-title">智慧答题</h1>
                        <p class="banner-subtitle">在线知识竞赛平台</p>
                    </div>
                </div>
                <div class="user-section" id="userSection">
                    {% if logged_in %}
                    <a href="/profile" class="user-avatar">
                        <img src="" alt="用户头像" class="user-avatar-img" id="userAvatarImg" style="display: none;">
                        <span class="user-avatar-text" id="userAvatarText">{{ username[0] if username else '用' }}</span>
                    </a>
                    {% else %}
                    <a href="/login" class="login-link">登录</a>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="container">
            <!-- Hero区域 -->
            <div class="hero-section">
                <h2 class="hero-title">开启你的智慧之旅</h2>
                <p class="hero-text">涵盖广泛知识领域，随时随地检验学习成果</p>
                <button class="btn btn-primary btn-block start-quiz-btn" onclick="startQuizWithCategory('')">
                    🎯 立即开始答题
                </button>
            </div>

            <!-- 快速统计 -->
            <div class="quick-stats">
                <div class="stat-card">
                    <div class="stat-value">{{ authData["registerNum"] }}</div>
                    <div class="stat-label">注册用户</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ authData["questionNum"] }}</div>
                    <div class="stat-label">题库题目</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{authData["answerNum"]}}</div>
                    <div class="stat-label">完成答题</div>
                </div>
            </div>

            <!-- 功能特色 -->
            <section class="section">
                <h3 class="section-title">平台优势</h3>
                <div class="features-list">
                    <div class="feature-item">
                        <div class="feature-icon">📚</div>
                        <div class="feature-content">
                            <h4>海量题库</h4>
                            <p>涵盖各学科知识，题目类型丰富多样</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">⚡</div>
                        <div class="feature-content">
                            <h4>即测即评</h4>
                            <p>答题后即时查看答案解析，快速巩固知识点</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">📊</div>
                        <div class="feature-content">
                            <h4>数据统计</h4>
                            <p>详细的学习记录和成绩分析</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🏆</div>
                        <div class="feature-content">
                            <h4>成就系统</h4>
                            <p>丰富的徽章和排行榜，激发学习动力</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 热门题库 -->
            <section class="section">
                <h3 class="section-title">热门题库</h3>
                <div class="categories-list">
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">💡</div>
                        <div class="category-content">
                            <h4>综合知识</h4>
                            <p>历史、地理、文学等多领域知识</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">🔬</div>
                        <div class="category-content">
                            <h4>科学技术</h4>
                            <p>物理、化学、生物等科学知识</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">🎨</div>
                        <div class="category-content">
                            <h4>文化艺术</h4>
                            <p>绘画、音乐、电影等艺术知识</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">💻</div>
                        <div class="category-content">
                            <h4>IT技术</h4>
                            <p>编程、网络、计算机科学</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">📐</div>
                        <div class="category-content">
                            <h4>数学</h4>
                            <p>数学、代数、几何等相关知识</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                    <div class="category-item" onclick="window.location.href='/quiz'">
                        <div class="category-icon">💰</div>
                        <div class="category-content">
                            <h4>经济管理</h4>
                            <p>经济学基础、商业管理知识</p>
                        </div>
                        <span class="category-arrow">›</span>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="mobile-nav">
        <a href="/" class="nav-item active">
            <div class="nav-icon"><img src="static/img/homePage_b.png" alt="ICO" style=" width:28px;height:auto;"></div>
            <div class="nav-label">首页</div>
        </a>
        <a href="/quiz" class="nav-item">
            <div class="nav-icon"><img src="static/img/test.png" alt="ICO" style=" width:30px;height:auto;"></div>
            <div class="nav-label">答题</div>
        </a>
        <a href="/leaderboard" class="nav-item">
            <div class="nav-icon"><img src="static/img/leaderboard.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">排行榜</div>
        </a>
        <a href="/profile" class="nav-item">
            <div class="nav-icon"><img src="static/img/me.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">我的</div>
        </a>
    </nav>

    <script src="/static/js/mobile/index.js"></script>
</body>
</html>

